<template>
  <div class="layout">
    <el-container class="layout-container">
      <!-- 左侧菜单 -->
      <el-aside width="200px">
        <div class="el-aside__logo"></div>
        <el-menu
          active-text-color="blue"
          background-color="rgb(236, 240, 240)"
          router
          text-color="black"
        >
          <el-menu-item index="/index">
            <template #title
              ><i class="el-icon-s-data" style="font-size: 20px"></i>
              <span>首页</span>
            </template>
          </el-menu-item>

          <el-menu-item index="/person">
            <template #title
              ><i class="el-icon-user-solid" style="font-size: 20px"></i>
              <span>人员管理</span>
            </template>
          </el-menu-item>

          <el-menu-item index="/goods">
            <template #title
              ><i class="el-icon-goods" style="font-size: 20px"></i>
              <span>商品管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/storehouse">
            <template #title
              ><i class="el-icon-house" style="font-size: 20px"></i>
              <span>仓库管理</span>
            </template>
          </el-menu-item>
          <!-- v-if="this.user.data.rolename == '管理员'" -->

          <el-submenu index="1">
            <template #title>
              <i class="el-icon-box" style="font-size: 20px"></i>
              <span>库存管理</span>
            </template>
            <el-menu-item index="/inventory">
              <template #title
                ><i class="el-icon-collection" style="font-size: 20px"></i>
                <span>库存信息</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/outgoods">
              <template #title
                ><i class="el-icon-s-marketing" style="font-size: 20px"></i>
                <span>出库记录</span>
              </template>
            </el-menu-item>
          </el-submenu>

          <el-menu-item index="/yuce">
            <template #title
              ><i class="el-icon-s-opportunity" style="font-size: 20px"></i>
              <span>商品预测</span>
            </template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 右侧主区域 -->
      <el-container>
        <!-- 头部区域 -->
        <el-header>
          <!-- <div><span>用户：{{ name }}</span></div> -->
          <div>
            <span>{{ name }}</span>
          </div>
          <el-dropdown placement="bottom-end">
            <span class="el-dropdown__box">
              <el-avatar :src="avatarUrl" />
              <el-icon>
                <CaretBottom />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item icon="el-icon-switch-button"
                  ><a @click="logout">退出登录</a></el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <!-- 中间区域 -->
        <el-main>
          <router-view></router-view>
        </el-main>
        <!-- 底部区域 -->
        <el-footer
          >智视预销 ©2024 Created by
          高瑞峰，王利强，周昱龙，田德军，梁瑞天，游政</el-footer
        >
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "管理员",
      user: localStorage.getItem("user")
        ? JSON.parse(localStorage.getItem("user"))
        : {},
      avatarUrl: "http://localhost:8061/static/upload/tou.jpg",
    };
  },
  methods: {
    getUser() {
      const realname = this.user.data.realName;
      this.name = realname;
      const avartImage = this.user.data.avart;
      if (avartImage != null) {
        this.avatarUrl = avartImage;
      }
    },
    logout() {
      localStorage.removeItem("user");
      this.$message.success("已成功退出");
      this.$router.push("/");
    },
  },
  created() {
    this.getUser();
    console.log(this.user);
  },
};
</script>

<style lang="less" scoped>
.layout-container {
  height: 100vh;

  .el-aside {
    // background-color: rgb(74, 103, 103);
    background: rgb(236, 240, 240);
    border-right: none;

    &__logo {
      height: 60px;
      background: url("@/assets/logo.png") no-repeat center / 200px auto;
    }

    .el-menu {
      border-right: none;
    }
  }

  .el-header {
    background-color: rgb(236, 240, 240);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-dropdown__box {
      display: flex;
      align-items: center;

      .el-icon {
        color: #1b0c0c;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }
  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: rgb(236, 240, 240);
    color: #847878;
  }
}
</style>